{% extends "./base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="app-memberships-wrapper">
    <bk-dialog v-model="form.visible" theme="primary" width="720" :ok-text="'添加特性'" :confirm-fn="updateOrCreate">
        <bk-form>
            <bk-form-item label="用户名">
                <user-selector  style="min-width: 400px;" v-model="form.username" :max-data="1"></user-selector>
            </bk-form-item>
            <bk-form-item label="应用特性">
                <bk-select v-model="form.feature" style="width: 250px;" ext-cls="select-custom" ext-popover-cls="select-popover-custom" searchable>
                    <bk-option v-for="(value, key) in ACCOUNT_FEATUREFLAG_CHOICES"
                        :key="key"
                        :id="key"
                        :name="value">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="状态">
                <bk-select v-model="form.isEffect" style="width: 250px;" ext-cls="select-custom" ext-popover-cls="select-popover-custom">
                    <bk-option key="true" id="true" name="允许"></bk-option>
                    <bk-option key="false" id="false" name="拒绝"></bk-option>
                </bk-select>
            </bk-form-item>
        </bk-form>
    </bk-dialog>

    <div class="toolbar">
        <bk-button theme="default" title="添加特性" icon="plus" class="mr10" @click="form.visible = true">添加特性</bk-button>
    </div>

    <bk-table style="margin-top: 15px;"
        :data="featureFlagList">
        <bk-table-column type="index" label="序列" align="center" width="60"></bk-table-column>
        <bk-table-column label="用户名" prop="role.name">
            <template slot-scope="props">
                <span>$[ props.row.user.username ]</span>
            </template>
        </bk-table-column>
        <bk-table-column label="特性名称" prop="role.name">
            <template slot-scope="props">
                <span>$[ featureToName(props.row.feature) ]</span>
            </template>
        </bk-table-column>
        <bk-table-column label="状态">
            <template slot-scope="props">
                <bk-switcher v-model="props.row.isEffect" show-text on-text="允许" off-text="拒绝" @change="handleChange(props.row)"></bk-switcher>
            </template>
        </bk-table-column>
    </bk-table>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const ACCOUNT_FEATUREFLAG_CHOICES = {{ ACCOUNT_FEATUREFLAG_CHOICES | to_json }}

    const featureFlagList = {{ feature_flag_list | to_json }}

    const featureToName = function (value) {
        for(key of Object.keys(ACCOUNT_FEATUREFLAG_CHOICES)){
            if(key === value){
                return ACCOUNT_FEATUREFLAG_CHOICES[key]
            }
        }
        return undefined
    }

    var URLRouter = {
        list: "{% url 'admin.accountmgr.account_feature_flags.api' %}",
        updateOrCreate: "{% url 'admin.accountmgr.account_feature_flags.api' %}",
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#app-memberships-wrapper",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    application,
                    loading: false,
                    loaded: false,
                    form: {
                        username: [],
                        feature: undefined,
                        isEffect: false,
                        visible: false
                    },
                    featureFlagList,
                    ACCOUNT_FEATUREFLAG_CHOICES,
                }
            },
            methods: {
                fetchData: function () {
                    if (this.loading) {
                        // 報錯
                        return
                    }
                    this.loading = true
                    this.loaded = false
                    this.$http.get(URLRouter.list).then(resp => {
                        this.featureFlagList = resp
                        this.$bkMessage({message: "数据刷新成功", limit: 1})
                        this.loaded = true
                    }).finally(err => {
                        this.loading = false
                    })
                },
                handleChange: function (row) {
                    this.$http.post(URLRouter.updateOrCreate,
                        {
                            username: row.user.username,
                            feature: row.feature,
                            isEffect: row.isEffect
                        }
                    ).then(() => {
                            this.fetchData()
                    })
                },
                updateOrCreate: function () {
                    this.$http.post(URLRouter.updateOrCreate,
                        {
                            username: this.form.username[0],
                            feature: this.form.feature,
                            isEffect: this.form.isEffect
                        }
                    ).then(() => {
                        this.form.visible = false
                        this.fetchData()
                    })
                },
                featureToName
            }
        })
    })
</script>
<style>
    .toolbar{
        justify-content: space-between;
        display: flex;
        align-items:center;
    }
</style>
{% endblock %}
